<template>
  <div class="school-notice">
    <!-- 操作按钮 -->
    <div class="operation">
      <el-button type="primary" @click="dialogFormVisible = true">添加新公告</el-button>
      <el-dropdown>
        <el-button type="primary">
          类型<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>其他公告</el-dropdown-item>
          <el-dropdown-item>助学金名单公示</el-dropdown-item>
          <el-dropdown-item>民主评议公告</el-dropdown-item>
          <el-dropdown-item>全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown>
        <el-button type="primary">
          状态<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>已删除</el-dropdown-item>
          <el-dropdown-item>待审核</el-dropdown-item>
          <el-dropdown-item>待发布</el-dropdown-item>
          <el-dropdown-item>已发布</el-dropdown-item>
          <el-dropdown-item>全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <hr/>
    <!-- 公告列表 -->
    <div class="config-header">公告列表</div>
    <!-- 列表 -->
    <div>
      <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="picture"
          label="图片">
        </el-table-column>
        <el-table-column
          prop="className"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.statusName }}</el-tag>
          </template>
          <!-- <el-tag type="success" v-if="status == 0">已发布</el-tag>
          <el-tag type="danger" v-else-if="status == 1">已删除</el-tag> -->
        </el-table-column>
        <el-table-column
          prop="name"
          label="发表人">
        </el-table-column>
        <el-table-column
          prop="date"
          label="创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="overdueDate"
          label="过期时间">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" @click="openRead(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-edit" @click="changeValue(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteValue(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1000">
        </el-pagination>
      </div>
    </div>
    <!-- 弹出框 新增公告-->
    <el-dialog title="新增公告" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题:" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型:" :label-width="formLabelWidth">
          <el-select v-model="form.selectclass" placeholder="请选择类型">
            <el-option label="其他公告" value="shanghai"></el-option>
            <el-option label="助学金名单公示" value="beijing"></el-option>
            <el-option label="民主评议报告" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过期时间:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="valueDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <span class="date-picker-tishi">公示时间不可低于5个工作日</span>
        </el-form-item>
        <el-form-item label="背景图片:" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容:" :label-width="formLabelWidth">
          <div>
            <tinymce :height="300" v-model="form.nowcontent"/>
          </div>
          <div class="editor-content" v-html="form.nowcontent"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 新增公告 -->
    <el-dialog title="修改公告" :visible.sync="dialogFormVisible1">
      <el-form>
        <el-form-item label="标题:" :label-width="formLabelWidth">
          <el-input v-model="rowdata.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="过期时间:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="valueDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <span class="date-picker-tishi">公示时间不可低于5个工作日</span>
        </el-form-item>
        <el-form-item label="背景图片:" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容:" :label-width="formLabelWidth">
          <div>
            <tinymce :height="300" v-model="rowdata.newcontent"/>
          </div>
          <div class="editor-content" v-html="rowdata.newcontent"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce/'
export default {
  name: 'announcement',
  filters: {
    statusFilter (status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data () {
    return {
      tableData: [{
        id: '1',
        picture: '',
        className: '0.2',
        title: '学生',
        status: 'published',
        statusName: '已发布',
        name: '王小虎',
        date: '2016-05-02',
        overdueDate: '2016-05-12',
        newcontent: '你bu好'
      }, {
        id: '2',
        picture: '',
        className: '0.2',
        title: '老师',
        status: 'deleted',
        statusName: '已删除',
        name: '王小虎',
        date: '2016-05-02',
        overdueDate: '2016-05-12',
        newcontent: '你好'
      }],
      currentPage4: 5,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        title: '',
        selectclass: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        nowcontent: ''
      },
      formLabelWidth: '120px',
      valueDate: '',
      fileList: [],
      rowdata: ''
    }
  },
  components: { Tinymce },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 查看当前记录
    openRead (row) {
      this.$alert(`${row.newcontent}`, '查看', {
        confirmButtonText: '关闭',
        callback: action => {
        }
      })
    },
    // 编辑当前记录
    changeValue (row) {
      console.log('row', row)
      this.rowdata = row
      this.dialogFormVisible1 = true
    },
    // 删除当前行 公告
    deleteValue (row) {
      this.$confirm('确定删除此公告吗?', '删除公告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 背景图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 $ { file.name } ？`)
    }
  }
}
</script>
<style lang="scss">
.el-dialog__wrapper{
  padding-bottom: 60px;
}
.el-form-item__content{
  text-align: left;
}
.el-table th, .el-table tr.el-table__row{
  // background-color: #f0ffd0;
}
</style>

<style lang="scss" scoped>
.school-notice{
  .operation{
    text-align: left;
  }
  hr{
    border: none;
    background-color: #eee;
    height: 1px;
  }
  .editor-content{
    margin-top: 20px;
  }
  .date-picker-tishi{
    color: red;
  }
}
</style>
